<template>
  <div class="m-20">
    <el-card class="seller-card">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2">
            <Shop />
          </el-icon>
          <span>商家信息</span>
        </div>
      </template>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
        <!-- 商家头像区域 -->
        <div class="flex flex-col items-center">
          <div class="w-40 h-40 rounded-lg overflow-hidden shadow-md">
            <img :src="'https://picsum.photos/200/200?random=1'" alt="商家头像"
              class="w-full h-full object-cover transition-transform hover:scale-105 duration-300">
          </div>
          <el-tag :type="sellerInfo.sellerStatus === 1 ? 'success' : 'warning'" class="mt-4 px-4 py-1">
            {{ statusText }}
          </el-tag>
        </div>

        <!-- 商家基本信息 -->
        <div class="md:col-span-2 space-y-4">
          <div class="flex items-center">
            <span class="text-gray-500 w-24">商家名称：</span>
            <span class="font-semibold text-lg">{{ sellerInfo.sellerName || '未设置' }}</span>
          </div>

          <div class="flex items-center">
            <span class="text-gray-500 w-24">商家ID：</span>
            <span>{{ sellerInfo.sellerId || '未设置' }}</span>
          </div>

          <div class="flex items-center">
            <span class="text-gray-500 w-24">注册时间：</span>
            <span>{{ formattedTime }}</span>
          </div>

          <div class="flex items-center">
            <span class="text-gray-500 w-24">联系电话：</span>
            <span>{{ sellerInfo.contactPhone || '未设置' }}</span>
          </div>

          <div class="flex items-center">
            <span class="text-gray-500 w-24">商家地址：</span>
            <span>{{ sellerInfo.address || '未设置' }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
import { getSellerInfo } from '../../apis/user';
let sellerInfo = ref({})
const getInfo = async () => {
  let res = await getSellerInfo()
  sellerInfo.value = res.data
}
const formattedTime = computed(() => {
  if (!sellerInfo.value.registerTime) return '未设置';

  // 处理带时区的日期字符串
  const date = new Date(sellerInfo.value.registerTime);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
});
onMounted(() => {
  getInfo()
})
</script>

<style lang="scss" scoped></style>